<template>
  <view class="product-list">
    <view
      class="product-item"
      v-for="(item, index) in goodsList"
      @click.stop="handleItem(item.id)"
      :key="index"
    >
      <view class="product-pic">
        <image lazy-load :src="item.cover_pic" mode="aspectFill" />
      </view>
      <view class="goods-info">
        <view class="goods-title">{{ item.name }}</view>
        <view class="goods-seckill">
          <template v-if="item.delivery_rules">
            {{ item.delivery_rules.name }}：{{ item.delivery_rules.times }}
          </template>
        </view>

        <view
          class="progress"
          :class="[
            item.progress <= 20 ? 'on' : '',
            item.progress >= 100 ? 'finished' : '',
          ]"
        >
          <view class="progress-let">
            <view
              class="line-icon"
              :style="[
                {
                  left: `${item.progress || 0}%`,
                },
              ]"
            >
              <i class="iconfont icon-shandian"></i>
            </view>

            <view
              class="line"
              :style="{
                width: `${item.progress || 0}%`,
              }"
            >
              <view class="line-box">
                <template v-if="item.progress >= 100"
                  >{{
                    parseInt(item.seckill_num) + parseInt(item.sale_num)
                  }}件抢光啦</template
                >
                <template v-else>
                  {{ `${item.progress || 0}%` }}
                </template>
              </view>
            </view>
          </view>
          <view class="progress-num"
            >仅剩{{
              item.seckill_num > 0 ? parseInt(item.seckill_num) : 0
            }}件</view
          >
        </view>

        <view class="info-down">
          <view class="price-box">
            <view class="price">
              <view>￥</view>
              <view>{{ item.price | priceBeforeZero }}</view>
              <view>{{ item.price | priceAfterZero }}</view>
            </view>
            <view class="origin-price"
              >￥{{ item.original_price || item.price }}</view
            >
          </view>

          <!-- <view class="buy-btn" @click.stop="$emit('clickBuyBtn', { item })">
            <i class="iconfont icon-add-select"></i>
          </view> -->
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    goodsList: {
      type: Array,
      default: [],
    },
  },

  filters: {
    priceBeforeZero(val) {
      if (val.indexOf(".") < 0) return `${val}.`;
      return val.substr(0, val.indexOf("."));
    },
    priceAfterZero(val) {
      if (val.indexOf(".") < 0) return "00";
      return val.substr(val.indexOf("."), val.length);
    },
  },

  methods: {
    handleItem(id) {
      uni.navigateTo({
        url: `/goods/goods/goods?id=${id}&is_seckill=1`,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.product-list {
  position: relative;
  z-index: 2;
  margin-top: 170rpx;
  background-color: #ffffff;
  border-radius: 20rpx 20rpx 0 0;
}

.product-item {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 24rpx;

  &:after {
    content: "";
    position: absolute;
    left: 248rpx;
    right: 24rpx;
    bottom: 0;
    height: 1px;
    background: #f8f8f8;
  }

  &:last-of-type:after {
    display: none;
  }

  .product-pic {
    margin-right: 20rpx;
    width: 228rpx;
    height: 228rpx;
    overflow: hidden;
    position: relative;
    border-radius: 10rpx;

    image {
      width: 100%;
      height: 100%;
      display: block;
    }
  }

  .goods-info {
    flex: 1;
    overflow: hidden;

    .goods-title {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      word-break: break-all;
      font-size: 28rpx;
      font-weight: 600;
      color: #1d1d1d;
    }

    .info-down {
      position: relative;
      margin-top: 10rpx;

      .price-box {
        display: flex;
        align-items: flex-end;
        .price {
          font-size: 24rpx;
          font-weight: 600;
          line-height: 1;
          color: #fa2c1b;
          display: flex;
          align-items: flex-end;
          view:nth-child(2) {
            font-size: 38rpx;
          }
        }
        .origin-price {
          font-size: 24rpx;
          font-weight: 400;
          color: #9b9b9b;
          display: inline-block;
          text-decoration: line-through;
          margin-left: 1.67vw;
        }
      }
      .goods-sales {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #9b9b9b;
        margin-top: 2.134vw;
      }
      .buy-btn {
        position: absolute;
        right: 0;
        bottom: 0;
      }
    }
  }
}
.product-item:last-child {
  margin-bottom: 0;
}

.goods-seckill {
  display: flex;
  align-items: center;
  height: 40rpx;
  color: #ff5c26;
  font-size: 24rpx;
  overflow: hidden;
}

.progress {
  display: flex;
  align-items: center;
  padding: 16rpx 0 8rpx;

  &.finished {
    .line-icon {
      display: none;
    }

    .line {
      background: #b6b6b6;
    }
  }

  .progress-let {
    margin-left: 10rpx;
    position: relative;
    flex: 1;
    border-radius: 32px;
    background: #ffe5e2;
    height: 28rpx;

    .line-icon {
      position: absolute;
      z-index: 2;
      top: 50%;
      margin: -20rpx 0 0 -20rpx;
      width: 40rpx;
      height: 40rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(
        180deg,
        #ffe975 0%,
        #ffe586 54%,
        #ffca5a 100%
      );
      border-radius: 60px;
      color: red;
    }

    .line {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      border-radius: 32px;
      color: #fff;
      font-size: 24rpx;
      background: #ff1b22;
      overflow: hidden;
    }

    .line-box {
      position: absolute;
      right: 50rpx;
      top: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      font-weight: bold;
      font-size: 20rpx;
    }
  }

  &.on {
    .line-box {
      left: 10rpx;
      right: auto;
    }
  }
}

.progress-num {
  margin-left: 20rpx;
  color: #f0250e;
  font-size: 24rpx;
  min-width: 140rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.buy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48rpx;
  height: 48rpx;
  background: #fa2c1b;
  border-radius: 16rpx;

  .iconfont {
    color: #fff;
    font-size: 40rpx;
  }
}
</style>
